<template>
	<view class="good-item" @click="goDetail(data.serialNo)">
		<u-image width="702rpx" height="400rpx"></u-image>
		<view class="coupon flex color-white px-12 justify-between items-center">
			<u-count-down :time="30 * 60 * 60 * 1000" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
				<view class="text-12">
					<text class="text-18">新品首发</text>
					<text class="ml-8">距结束</text>
					<text>{{ timeData.days }}&nbsp;天</text>
					<text>{{
              timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
            }}&nbsp;时</text>
					<text>{{ timeData.minutes }}&nbsp;分</text>
					<text>{{ timeData.seconds }}</text>
				</view>
			</u-count-down>
			<view class="ellipsis-1 text-12"> 已抢1318件 </view>
		</view>
		<view class="px-12 pt-12">
			<view class="ellipsis-4 text-14">
				<text class="new-tag">新品</text>
				{{data.content}}
			</view>
			<view class="text-12 color-warning pt-4 flex justify-between">
				<view class="ellipsis-1">含钙量国家高钙标准3配</view>
				<view class="color-gray">已售 11120</view>
			</view>
			<!--   优惠-->
			<view class="flex gap-8 pt-4">
				<view class="tag-error"> 8袋减120元 </view>
				<view class="tag-error"> 8袋减120元 </view>
			</view>
			<view class="flex justify-between items-center py-12">
				<view class="text-14 color-total-money">
					<text class="text-10">￥</text>
					<text>8.8</text>
				</view>
				<view class="addCardBtn flex">
					<view class="flex-1 card">
						<u-icon name="shopping-cart" size="24" color="#fff"></u-icon>
					</view>
					<view class="flex-1 color-white text-center px-8 text-14">
						购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: {},
			}
		},
		data() {
			return {
				timeData: {},
			};
		},
		methods: {
			onChange(e) {
				this.timeData = e;
			},
			goDetail(goodsNo) {
				console.log("*********************************")
				console.log(goodsNo)
				this.$Router.push({
					name: "goodsDetail",
					params: {
						serialNo: goodsNo,
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.good-item {
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		position: relative;

		.coupon {
			width: 702rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			position: absolute;
			top: 320rpx;
			height: 80rpx;
			line-height: 50rpx;
			background: linear-gradient(to right, #df4843, #ea9d56);
		}

		.tag-error {
			color: $u-error;
			border-radius: 8rpx;
			border: solid 1px $u-error;
			font-size: 20rpx;
			padding: 2rpx 8rpx;
		}

		.new-tag {
			background: linear-gradient(155deg,
					$u-primary-disabled 0%,
					$u-primary 100%);
			color: white;
			font-size: 24rpx;
			border-radius: 4rpx;
			padding: 4rpx 8rpx;
			margin-right: 8rpx;
		}

		.addCardBtn {
			height: 60rpx;
			width: 200rpx;
			background: $u-primary-dark;
			border-radius: 30rpx;
			overflow: hidden;
			line-height: 60rpx;

			.card {
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(155deg,
						$u-primary 0%,
						$u-primary-disabled 100%);
			}
		}
	}
</style>